<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="hello" :appear="true"> 
        <h1 v-show="isShow">你好啊！过渡</h1>
    </transition>
  </div>
</template>

<script>
export default {
    name: 'Test',
    data() {
        return {
            isShow: true
        }
    }
}
</script>

<style scoped>
    h1 {
        background-color: orange;
    }

    .hello-enter-active,.hello-leave-active  {
        transition: 0.5s linear; /* 配置过渡 */
    }

    /* 进入起点的样式 名称为 v-enter */
    /* 离开终点的样式 名称为 v-leave-to */
    .hello-enter,.hello-leave-to{ 
        transform: translateX(-100%);
    }

    /* 进入终点的样式 名称为 v-enter-to */
    /* 离开起点的样式 名称为 v-leave */
    .hello-leave,.hello-enter-to{ 
        transform: translateX(0);
    }

</style>